<template>
	<view class="order_main">
		<NavTabbar activeTab="message"></NavTabbar>

		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="navbar-content">
					<!-- <uni-icons type="back" @click="back" color="#fff" size="26" class="back_btn"></uni-icons> -->
					<view class="navBar">
						<view>消息</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view class="navbar-content" :style="{width:'100%',height:navBarHeight+'px'}">
					<!-- <uni-icons type="back" @click="back" color="#fff" size="26" class="back_btn"></uni-icons> -->
					<view class="navBar">
						<view>消息</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<!-- <view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view> -->
		</view>
		<view class="body-view">
			<view class="search_box">
				<uni-easyinput class="search" placeholderStyle="font-size:28rpx;" type="text" @confirm="search"
					:inputBorder="false" @clear="clear" prefixIcon="search" @input="input" v-model="dataObj.keyword"
					placeholder="单号/客户名称/客户手机号"></uni-easyinput>
				<view class="search_btn" @click="search">
					搜索
				</view>
			</view>
			<view class="scroll_content">
				<scroll-view :refresher-triggered="triggered" refresher-background="transparent"
					@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true"
					@scrolltolower="scrolltolower" class="scroll_y" @refresherrefresh="onRefresh">
					<view class="list_log" v-if="OrderMessageList">
						<view v-for="(itemObj,index) in OrderMessageList.rows" :key="index" class="list-item"
							@click="goSendMessage(itemObj)">
							<view class="list-item_contenVo">
								<view class="list-item_contenVo_left">
									<view class="list-item_contenVo_left_wNo" style="font-weight: bold;">
										{{itemObj.workNo}}
									</view>
									<view class="list-item_contenVo_left_mo">
										{{itemObj.module}}
									</view>
								</view>
								<view class="list-item_contenVo_right_tag"
									:style="{backgroundColor:status.filter(o=>itemObj.status==o.status)[0].color,'--item-color':status.filter(o=>itemObj.status==o.status)[0].color}">
									{{status.filter(o=>itemObj.status==o.status)[0].name}}
								</view>
							</view>
							<view class="list-item_contenVo">
								<view class="list-item_contenVo_left">
									<view class="list-item_contenVo_left_tip">
										客户名称：
									</view>
									<view class="list-item_contenVo_left_wNo">
										{{setUserName(itemObj.userName)}}
									</view>
								</view>

							</view>
							<view class="list-item_contenVo">
								<view class="list-item_contenVo_left">
									<view class="list-item_contenVo_left_tip">
										工程师：
									</view>
									<view class="list-item_contenVo_left_wNo">
										{{itemObj.engineer}}
									</view>
								</view>
								<view class="time_tip" v-if="itemObj.leaveMessageTime">
									{{formatChatTime(itemObj.leaveMessageTime)}}
								</view>
							</view>
							<view class="list-item_footer" v-if="itemObj.leaveMessageQty>0">
								<view class="list-item_footer_time">
									{{itemObj.leaveMessage?itemObj.leaveMessage:'[图片]'}}
								</view>
								<view class="right_msg">
									{{itemObj.leaveMessageQty}}
								</view>
							</view>
						</view>
						<view class="no_some" v-if="OrderMessageList.rows.length>0">
							{{titleHint}}
						</view>
					</view>
					<view v-if="OrderMessageList.rows.length==0" class="void_goods">
						<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
						<view class="tip">暂无记录</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import { onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'
	import NavTabbar from "@/components/u-network/nav-tabbar.vue"
	import apiMessage from "@/util/network_api/apiMessage.js"
	import store from '@/store_network/index.js'
	import _ from "lodash";
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})

	onLoad(async () => {
		// uni.showLoading({
		// 	title: '加载中',
		// })
		// if (!store.state.isManager) {
		// 	status.value = statusList2.value
		// } else {
		// 	status.value = statusList.value
		// }
		// getNetworkList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 底部显示提示
	const titleHint = ref('没有更多了')
	const OrderMessageList = ref({
		"total": 0,
		"rows": []
	})
	const dataObj = ref({
		"keyword": "",
		"limit": 0,
		"page": 1,
		"status": 0,
		"workNo": ""
	})
	// 处理隐藏姓名
	function setUserName(str) {
		let tem = ''
		tem = str.slice(0, 1) + '**'
		return tem
	}
	//工程师
	const statusList2 = ref([
		{ status: 1, name: '待接单', color: '#f56c6c' },
		{ status: 2, name: '服务中', color: '#00c0c0' },
		{ status: 3, name: '待结单', color: '#e69103' },
		{ status: 4, name: '已完成', color: ' #007cff' },
		{ status: 5, name: '已取消', color: '#ccc' },
		{ status: 50, name: '待结算', color: '#e69103' }
	])
	const statusList = ref([
		{ status: 1, name: '待接单', color: '#f56c6c' },
		{ name: '待派工', status: 2, color: '#e69103' },
		{ name: '待工程师接单', status: 3, color: '#e69103' },
		{ name: '服务中', status: 4, color: ' #00c0c0' },
		{ name: '待结单', status: 5, color: '#e69103' },
		{ name: '已完成', status: 6, color: ' #007cff' },
		{ name: '已取消', status: 7, color: '#ccc' },
		{ name: '待结算', status: 50, color: '#e69103' }
	])
	onShow(async () => {
		uni.showLoading({
			title: '加载中',
		})
		if (!store.state.isManager) {
			status.value = statusList2.value
		} else {
			status.value = statusList.value
		}
		getNetworkList()
	})
	const status = ref([])
	// *************end********
	// 获取消息列表
	const getNetworkList = async () => {
		dataObj.value.keyword = dataObj.value.keyword.trim()
		await apiMessage.getNetworkOrderMessageList(dataObj.value).then(res => {
			if (res.code == 20000) {
				if (triggered.value) {
					OrderMessageList.value = { rows: [], total: 0 }
				}
				if (OrderMessageList.value.total > OrderMessageList.value.rows.length && dataObj.value.page > 1) {
					OrderMessageList.value.total = res.data.total - 0
					OrderMessageList.value.rows = [...OrderMessageList.value.rows, ...res.data.rows]
				} else {
					OrderMessageList.value = res.data
				}
			}
		})
		uni.hideLoading()
	}
	// 搜索
	const clear = () => {
		dataObj.value.keyword = ''
		search()
	}
	const search = _.debounce(async () => {
		uni.showLoading({
			title: '加载中...'
		})
		dataObj.value.page = 1
		await getNetworkList()
	}, 500)
	const input = (n) => {
		if (!n) {
			search()
		}
	}
	// 下拉刷新触发
	const triggered = ref(false)
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	const onRefresh = async () => {
		dataObj.value.keyword = ''
		dataObj.value.page = 1
		await getNetworkList()
		setTimeout(() => {
			triggered.value = false
		}, 500)

	}
	// 滚到底部触发
	const scrolltolower = () => {
		if (OrderMessageList.value.total > OrderMessageList.value.rows.length) {
			uni.showLoading({
				title: '加载中',
			})
			dataObj.value.page += 1
			titleHint.value=''
			getNetworkList()
		}else{
			titleHint.value='没有更多了'
		}
	}
	// 判断日期并返回不同格式的时间
	function formatChatTime(time) {
		let time2 = time.replace(/-/g, '/')//xxxx-xx-xx ==>xxxx/xx/xx
		const datetime : any = new Date(time2);
		const now : any = new Date();
		const diff = now - datetime;
		const yesterday = new Date(now);
		yesterday.setDate(now.getDate() - 1)
		const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
		const hour = datetime.getHours();
		let str = ''
		if (hour >= 0 && hour < 12) {
			str = '上午'
		} else if (hour >= 12 && hour < 18) {
			str = '下午'
		} else {
			str = '晚上'
		}
		if (datetime.toDateString() === now.toDateString()) {
			return str + ' ' + datetime.getHours().toString().padStart(2, '0') + ':' + datetime.getMinutes().toString().padStart(2, '0');
		} else if (yesterday.toDateString() === datetime.toDateString()) {
			return '昨天 ' + str + ' ' + datetime.getHours().toString().padStart(2, '0') + ':' + datetime.getMinutes().toString().padStart(2, '0');
		} else if (Math.floor((now - datetime) / (1000 * 60 * 60 * 24 * 7)) === 0) {
			return days[datetime.getDay()] + ' ' + str + datetime.getHours().toString().padStart(2, '0') + ':' + datetime.getMinutes().toString().padStart(2, '0');
		} else if (datetime.getFullYear() == now.getFullYear()) {
			return datetime.getMonth() + 1 + '月' + datetime.getDate() + '日 ' + datetime.getHours().toString().padStart(2, '0') + ':' + datetime.getMinutes().toString().padStart(2, '0');
		} else {
			return time
		}
	}
	// 跳转发送留言
	const workId = ref('')
	const goSendMessage = (item) => {
		workId.value = item.id
		apiMessage.updateNetworkOrderNotReadMessage(workId.value).then()
		uni.navigateTo({
			url: '/pages_network/message/inputSend?workId=' + workId.value
		})
	}
</script>

<style lang="scss" scoped>
	.order_main {
		height: 100vh;
		width: 100vw;
		// background-image: url('/static/network/bg_main.png');
			background: linear-gradient(#007cff 10%, #fafafa 10%);
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.fixed {
			// position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
		}

		.navbar-content {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;

			.back_btn {
				margin-left: 12rpx;
				position: relative;
				z-index: 9;
			}

			.navBar {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		:deep(.uni-searchbar__cancel) {
			color: #FFFFFF;
		}

		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			overflow: hidden;
			height: 100%;

			:deep(.uni-scroll-view) {
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}
			}

			.search_box {
				display: flex;
				align-items: center;
				padding: 24rpx;
				background-color: #fff;

				:deep(.uni-easyinput__content) {
					background-color: #f3f4f8 !important;
					border-radius: 50rpx;
				}
				.search {
					flex: 1;
					padding: 0 12rpx;
				}

				.search_btn {
					font-size: 28rpx;
					font-weight: bold;
					// color: #fff;
					color: #007cff;
					margin-left: 12rpx;
				}
			}

			.scroll_content {
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;

				.scroll_y {
					height: 100%;

					.void_goods {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						width: 100%;
						height: 40vh;

						.img {
							width: 60%;
							height: 250rpx;
						}

						.tip {
							color: #aaa;
							font-size: 28rpx;
						}
					}

					.list_log {
						padding-bottom: 160rpx;
						.no_some {
							font-size: 24rpx;
							color: #ccc;
							text-align: center;
							width: 100%;
							padding-bottom: 24rpx;
						}
						.list-item {
							background-color: #FFFFFF;
							margin: 30rpx 24rpx;
							padding: 12rpx 0 24rpx 24rpx;
							font-size: 28rpx;
							border-radius: 10rpx;

							&_contenVo {
								display: flex;
								flex-wrap: nowrap;
								align-items: center;
								padding: 2rpx 0;

								.red_tag {
									font-size: 24rpx;
									margin: 0 16rpx;
									color: rgba(245, 108, 108, 1);
								}

								&_left {
									display: flex;
									align-items: center;
									flex-wrap: nowrap;
									flex: 1;

									&_wNo,
									&_tip {
										white-space: nowrap;
									}

									&_tip {
										color: #777;
									}

									&_wNo {
										margin-right: 10rpx;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
									}

									&_mo {
										flex: 1;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
										color: #00c0c0;
										font-size: 24rpx;
									}

									overflow: hidden;
								}

								&_right {
									display: flex;
									flex-wrap: nowrap;
									flex: 1;

									&_tag {
										font-size: 22rpx;
										border-radius: 25rpx 0 0 25rpx;
										color: #FFFFFF;
										padding: 8rpx 16rpx;
										position: relative;
										right: -5rpx;

										&::after {
											content: '';
											position: absolute;
											right: -5rpx;
											bottom: -5rpx;
											border: 5rpx solid transparent;
											border-left-width: 5rpx;
											border-left-color: var(--item-color);
										}
									}
								}

								.time_tip {
									margin-right: 16rpx;
									color: #999;
									font-size: 24rpx;
								}
							}

							&_footer {
								display: flex;
								align-items: center;
								justify-content: space-between;
								color: rgba(85, 85, 85, 1);
								padding: 8rpx 24rpx;
								margin-right: 24rpx;
								margin-top: 12rpx;
								border-radius: 8rpx;
								background-color: rgba(246, 247, 248, 1);

								&_time {
									margin: 0 8rpx;
									flex: 1;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.right_msg {
									background-color: #f56c6c;
									color: #fff;
									width: 40rpx;
									height: 40rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24rpx;
									border-radius: 50%;
								}
							}
						}
					}
				}
			}
		}
	}
</style>